<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <style>
        .flex-container {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap; /* flex-direction 和 flex-wrap 简写(row:行排列 wrap:自动换行) */
            font-weight: bold;
            text-align: center;
        }

        /* 所有子元素flex都为1, 所以默认情况下, 整个列表将只有一列, 每个子元素占一行 */
        .flex-container > * {
            /*padding: 10px;*/
            flex: 1 100%;
        }

        .header {
            background: coral;
        }

        .main {
            text-align: left;
            background: cornflowerblue;
        }

        .footer {
            background: lightgreen;
        }

        /* aside-left */
        .aside1 {
            background: moccasin;
        }

        /* aside-right */
        .aside2 {
            background: violet;
        }

        /* 400 以上 */
        @media all and (min-width: 400px) {
            /* 400 以上 flex 为 1, 宽度自动缩放填充, 而不是 100% 占用整行 */
            .aside {
                flex: 1;
            }
        }

        /* 600+ */
        @media all and (min-width: 600px) {
            /* 占用 3 列*/
            .main {
                flex: 3;
            }

            .aside1 {
                order: 1;
            }

            .main {
                order: 2;
            }

            .aside2 {
                order: 3;
            }

            .footer {
                order: 4;
            }
        }
    </style>
</head>
<body>

<div class="flex-container">
    <header class="header">头部</header>
    <article class="main">
        <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP ,
            MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。</p>
    </article>
    <aside class="aside aside1">边栏 1</aside>
    <aside class="aside aside2">边栏 2</aside>
    <footer class="footer">底部</footer>
</div>

<style>

    .abc {
        background: #ff4400;
    }

    .abc + .def {
        background: #f0f0f9;
        color: aqua;
    }
    
</style>

<div>
    <div class="abc">ABC</div>
    <div class="def">DEF</div>
</div>
</body>
</html>
